<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度糯米购物信息导航</title>
		<style>
				li{list-style: none; }
				ul,li{margin: 0; padding: 0;}
				#picture{
					position: fixed; right: 0px; bottom: 300px;			
				}
				#picture li{
					
					background-color: cadetblue;
					margin-bottom: 5px;
					padding: 5px;
					border-radius: 5px 0px 0px 5px;
				}
				p{
					color: white;
					 font-weight: bold;
					 height: 30px;
					 line-height: 30px; 
					 opacity: 0;
					 width: 70px;
				}
				#gouwuche{
					background: black;
					border-radius: 5px 0px 0px 5px;
					position: fixed;
					right: 0px; bottom: 402px;
					padding-right: 50px;
					padding-left: 15px;
				}	
				#guanzhu{
					background: black;
					border-radius: 5px 0px 0px 5px;
					position: fixed;
					right: 0px; bottom: 364px;
					padding-right: 50px;
					padding-left: 15px;
					}
				#zuji{
					background: black;
					border-radius: 5px 0px 0px 5px;
					position: fixed;
					right: 0px; bottom: 328px;
					padding-right: 50px;
					padding-left: 15px;
				}
				#xinxi{
					background: black;
					border-radius: 5px 0px 0px 5px;
					position: fixed;
					right: 0px; bottom: 290px;
					padding-right: 50px;
					padding-left: 15px;
					}
				@keyframes spread{
					0%{width: 0px;}15%{width: 10px;}30%{width: 20px;}45%{width: 30px;}
					60%{width: 40px;}75%{width: 50px;}90%{width: 60px;}100%{width: 70px;}
				}
			
			
				
				#picture li:nth-of-type(1):hover #gouwuche{
					animation: spread 0.5s linear both;
					opacity: 0.7;
				}
				#picture li:nth-of-type(2):hover #guanzhu{
					animation: spread 0.5s linear both;
					opacity: 0.7;
				}			
				#picture li:nth-of-type(3):hover #zuji{
					animation: spread 0.5s linear both;
					opacity: 0.7;
				}
				#picture li:nth-of-type(4):hover #xinxi{
					animation: spread 0.5s linear both;
					opacity: 0.7;
				}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="../img/img.bmp" width="90%" height="90%" />
			<ul id="picture">
				<li><p id="gouwuche">购物车</span><img src="../img/toolbar_05.png"></li>
				<li><p id="guanzhu">我的关注</p><img src="../img/toolbar_10.png"/></li>
				<li><p id="zuji">我的足迹</p><img src="../img/toolbar_15.png"/></li>
				<li><p id="xinxi">我的消息</p><img src="../img/toolbar_19.png"/></li>	
			</ul>
			
		</div>
	</body>
</html>
